<script setup lang="ts">
// 编辑视频弹窗
import { computed, ref, watch } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
// import { documentContentEdit } from '@/service/api';
import { localStg } from '@/utils/storage';
import { USER_INFO } from '@/utils/const';
import { successMessage } from '@/utils/utils';
import { updateWriteAction } from '@/service/api';

interface Props {
  show: boolean;
  taskId: number;
  projectName: string;
}

interface FormData {
  name: string;
}

const formData = ref<FormData>({
  name: ''
});

const formRef = ref<FormInst | null>(null);

// 校验规则
const rules: FormRules = {
  name: {
    required: true,
    message: '请输入文档名',
    trigger: ['input', 'blur']
  }
};

const props = withDefaults(defineProps<Props>(), {
  show: false,
  taskId: 0,
  projectName: ''
});

const emit = defineEmits(['update:show', 'refresh']);

const modalShowValue = computed({
  get() {
    return props.show;
  },
  set(value: boolean) {
    emit('update:show', value);
  }
});

watch(
  () => props.show,
  value => {
    if (value) {
      formData.value.name = props.projectName;
    }
  }
);

// 取消
function closeModal() {
  console.log('close');
  modalShowValue.value = false;
}

const userInfo: Api.Auth.UserInfo = localStg.get(USER_INFO)!;

// 确认
function submitClick() {
  formRef.value?.validate(async errors => {
    if (!errors) {
      const params: any = {
        id: props.taskId, // 必传
        title: formData.value.name, // 标题
        type: 1, // 文件类型(1.标书 )
        materialType: 1, // 素材类型(1.标书)
        industryType: 1 // 行业类型(1.软件类 2.服务类 3.货物类 4.工程类 20.其他)
      };
      const { data, error } = await updateWriteAction(params);
      if (!error) {
        successMessage('重命名成功！');
        emit('refresh', formData.value.name);
        closeModal();
      }
    }
  });
}
</script>

<template>
  <NModal
    v-model:show="modalShowValue"
    preset="card"
    title="请输入项目名称"
    class="w-640px"
    :mask-closable="false"
    @close="closeModal"
  >
    <NForm ref="formRef" :model="formData" :rules="rules" label-placement="left" label-width="auto">
      <NFormItem path="name">
        <NInput v-model:value="formData.name" type="text" :maxlength="50" placeholder="请按照“xxx项目”的格式输入项目名称" clearable />
      </NFormItem>
    </NForm>
    <template #footer>
      <NSpace class="w-full" :size="24" justify="end">
        <NButton class="w-72px" @click="closeModal">取消</NButton>
        <NButton class="w-72px" type="primary" @click="submitClick">确定</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
